<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item label="" prop="launchStatus">
                            <el-select v-model="condition.search.launchStatus"
                                       placeholder="状态">
                                <el-option label="推广中" :value="1"></el-option>
                                <el-option label="已暂停" :value="5"></el-option>
                                <el-option label="已删除" :value="8"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="sync">同步</el-button>
                        </el-form-item>
                        <el-form-item>
                            如果没有数据，请先点击同步～
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table
            id="keywordTable"
            :data="tableData"
            size="small"
            border
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="50" fixed="left">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="premiumName"
                fixed="left"
                label="推广名字">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                fixed="left"
                label="同步时间">
            </el-table-column>
            <el-table-column
                prop="launchPremiumStatus"
                :formatter="formatPremiumStatus"
                label="推广状态">
            </el-table-column>
            <el-table-column
                prop="launchName"
                label="关联推广">
            </el-table-column>
            <el-table-column
                prop="premiumContent"
                align="center"
                label="内容">
                <template v-slot="scope">
                    <table-popover :text=scope.row.premiumContent :length="24" placeholder="点击查看">
                    </table-popover>
                </template>
            </el-table-column>
            <el-table-column label="点评" align="center">
                <el-table-column
                    prop="dpBasicBidPrice"
                    label="基础价格">
                </el-table-column>
                <el-table-column
                    prop="dpBidPrice"
                    label="竞价价格">
                </el-table-column>
            </el-table-column>
            <el-table-column label="美团" align="center">
                <el-table-column
                    prop="mtBasicBidPrice"
                    label="基础价格">
                </el-table-column>
                <el-table-column
                    prop="mtBidPrice"
                    label="竞价价格">
                </el-table-column>
            </el-table-column>
            <el-table-column label="今日数据" align="center">
                <el-table-column
                    prop="t30001"
                    label="花费">
                </el-table-column>
                <el-table-column
                    prop="t30002"
                    label="曝光">
                </el-table-column>
                <el-table-column
                    prop="u10cpm"
                    width="100"
                    label="千次曝光成本">
                </el-table-column>
                <el-table-column
                    prop="t30003"
                    label="点击">
                </el-table-column>
                <el-table-column
                    prop="t30004"
                    label="点击均价">
                </el-table-column>
                <el-table-column
                    prop="u10001"
                    label="点击率">
                </el-table-column>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="140">
                <template v-slot="scope">
                    <div>
                        <el-button @click="setPrice(scope.row)" type="text" size="small">调整出价</el-button>
                        <el-button type="text" size="small" @click="priceLog(scope.row)">出价日志</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>

        <el-dialog title="设置出价" width="30%" :visible.sync="setPriceDialogVisible">
            <el-form :model="setPriceForm" label-width="120px" size="small">
                <el-form-item label="点评出价">
                    <el-input v-model="setPriceForm.dpBidPrice" placeholder="点评出价"></el-input>
                </el-form-item>
                <el-form-item label="美团出价">
                    <el-input v-model="setPriceForm.mtBidPrice" placeholder="评价内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setPriceDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setPriceConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="出价日志" width="60%" :visible.sync="priceLogDialogVisible">
            <dp-cpc-log :launch-id="selectedRow.launchPremiumId"></dp-cpc-log>
            <div slot="footer" class="dialog-footer">
                <el-button @click="priceLogDialogVisible = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addDpCpcKeyword,
    deleteDpCpcKeyword,
    getDpCpcKeywordByPage,
    setDpCpcKeywordPrice,
    syncDpCpcKeyword,
    updateDpCpcKeyword
} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";
import DpCpcLog from "@/component/DpCpcLog";

export default {
    name: "DpCpcKeyword",
    components: {TablePopover, DpCpcLog},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {
                    launchStatus: 1
                }
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            // 设置出价
            setPriceDialogVisible: false,
            setPriceForm: {
                launchPremiumId: '',
                dpBidPrice: '',
                mtBidPrice: '',
            },

            // 出价日志
            priceLogDialogVisible: false,
            priceLogForm: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        launchId: Number,
        size: {
            type: String,
            default: 'small'
        },
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatLaunchStatus: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "正常";
            } else if (cellValue == '6') {
                return "已删除";
            } else if (cellValue == '3') {
                return "已暂停";
            } else {
                return "未知";
            }
        },
        // 格式状态
        formatPremiumStatus: function (row, column, cellValue) {
            if (cellValue == 1) {
                return "推广中";
            } else if (cellValue == 5) {
                return "已暂停";
            } else if (cellValue == 8) {
                return "已删除";
            } else {
                return "未知";
            }
        },
        // 出价日志
        priceLog(row) {
            this.selectedRow = row;
            this.priceLogDialogVisible = true;
        },
        // 设置出价
        setPrice(row) {
            this.setPriceForm.id = row.id;
            this.setPriceForm.shopId = row.shopId;
            this.setPriceForm.launchPremiumId = row.launchPremiumId;
            this.setPriceForm.dpBidPrice = row.dpBidPrice;
            this.setPriceForm.mtBidPrice = row.mtBidPrice;
            this.setPriceDialogVisible = true;
        },
        // 设置出价确认
        setPriceConfirm() {
            setDpCpcKeywordPrice(this.setPriceForm).then(data => {
                if (data.respCode == 1000) {
                    this.setPriceDialogVisible = false;
                    this.getData();
                }
            })
        },
        sync() {
            let params = {};
            params.shopId = this.shopId;
            syncDpCpcKeyword(params).then(data => {
                if (data.respCode == 1000) {
                    this.getData();
                }
            });
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#keywordTable', '关键词报表.xlsx');
        },
        add: function () {
            addDpCpcKeyword(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateDpCpcKeyword(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDpCpcKeyword({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            if (this.launchId) {
                this.condition.search.launchId = this.launchId;
            }
            getDpCpcKeywordByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
.el-form--inline .el-form-item {
    margin-right: 0;
}

/deep/ .el-input__inner {
    padding: 0 5px;
}
</style>
